<template>
  <div class="chart-container" :id="id" v-if="chartType==='line'" style="position: absolute; left: 0%; right: 0%; top: 0px; bottom: 0%; z-index:9; height: 100%;"></div>
</template>

<script>
  import * as echarts from 'echarts' // 引入ECharts库
  export default {
    name: "echarts",
    data() {
        return {
            chart1: null,
            chart2: null,
        };
    },
    props: {
        id: {
            type: String,
            default: () => {
              return 'chart1'
            }
        },
        // chart类型  line折线图  bar柱状图 pie饼状图
        chartType: {
            type: String,
            default: () => {
              return 'line'
            }
        },
        lineData:{
          type: Array,
          default: () => {
            return []
          }
        },
        // 饼状图数据
        pieData: {
          type: Object,
            default: () => {
              return {}
            }
        }
    },
    watch: {
        chartType: {
            handler(newVal, oldVal) {
                this.$nextTick(() => {
                  if(newVal ==='line') {
                   this.initChartLine()
                  } else if(newVal ==='pie') {
                    this.initChartPie()
                  }
                  
                })
            },
            deep: true,
            immediate: true,
        }
    },
    mounted() {
      window.addEventListener('resize', this.resizeChart);
    },
    methods: {
      // 折线图
      initChartLine() {
        const labelData = [];
        const valueData = [];
        this.lineData.forEach(item=>{
          labelData.push(item.label)
          valueData.push(item.value)
        })
        this.chart1 = echarts.init(document.getElementById(this.id))
        const option = {
          title: {
            show: false,
          },
          tooltip: {
            trigger: 'item',
            // 可以在这里添加更多 tooltip 配置
            axisPointer: {
              type: 'line',
            },
            enterable: true,
          },
          grid: {
            left: '8%', // 距离左边的距离
            right: '2%', // 距离右边的距离
            top: '20%', // 距离顶部的距离
            bottom: '16%' // 距离底部的距离
          },
          xAxis: {
            type: 'category', // x轴类型为类目轴
            // boundaryGap: false, // 取消x轴两端空白
            // data: labelData, //['1月', '2月', '3月', '4月', '5月', '6月'], // x轴类目数据
            data: ['1月', '2月', '3月', '4月', '5月', '6月'], // x轴类目数据
            axisTick: {
              show: false, // 不显示刻度
            },
            axisLabel: { //x轴文字的配置
              color: "#353535", //Y轴内容文字颜色
              interval: 'auto', // 可以设置为具体的数字，如 5，表示显示每隔 5 个标签
            },
            axisLine: {
              lineStyle: {
                color: '#EFF1F3' // x轴线的颜色
              }
            },
            splitLine: {
              // 纵向分割线
              show: false,
              lineStyle: {
                color: '#032B50'
              }
            }
          },
          yAxis: {
            type: 'value', // y轴类型为数值轴
            // name: '单位：斤/元', //单位
            nameLocation: 'end', // (单位个也就是在在Y轴的最顶部)
            //单位的样式设置
            nameTextStyle: {
              color: "#C3D5E9", //颜色
              padding: [0, 20, 0, 40], //间距分别是 上 右 下 左
              fontSize: 14,
            },
            axisLabel: { //y轴文字的配置
              color: "#999", //Y轴内容文字颜色
            },
            axisLine: { //y轴线的配置
              show: true, //是否展示
              lineStyle: {
                color: "#EFF1F3", //y轴线的颜色（若只设置了y轴线的颜色，未设置y轴文字的颜色，则y轴文字会默认跟设置的y轴线颜色一致）
                width: 1, //y轴线的宽度
                type: "solid" //y轴线为实线
              },
            },
            axisTick: {
              show: false // y轴上的小横线
            },
            // 横向分割线
            splitLine: {
              show: true, // 显示分割线。
              lineStyle: {
                // 分割线样式。
                color: '#EFF1F3', // 分割线颜色。
                type: 'solid' // 分割线类型。 solid实线  dotted点型虚线  dashed线性虚线
              }
            },
            splitNumber: 4, // 指定横向分割线的数量
          },
          //  图例
          legend: {
            // data: ['数据一'],
            left: 'center',
            top: 'top',
            textStyle:{
              color: '#fff',
              fontSize: '16px'
            }
          },
          series: [
          {
            type: 'bar', // 图表类型为折线图
            // name: '数据一',
            // data: valueData, //[40, 60, 20, 120, 60, 70], // 折线图数据
            data: [40, 60, 20, 120, 60, 70], // 折线图数据
            smooth: true, // 平滑曲线
            barMaxWidth: 20, // 柱状的宽度
            color: "#3F9DFF", //拐点颜色
            // 拐点处显示值
            itemStyle : {
              normal: {
                label : {
                  show: true,
                  position: 'top',
                  color: '#333',
                  fontSize: 16
                },
                barBorderRadius: 4,
              },
            },
          }],
        }
        this.chart1.setOption(option)
      },

      // 饼状图
      initChartPie(){
        this.chart2 = echarts.init(document.getElementById('charts2'))
        const option = {
          legend: {
            right: '40px',
            orient: 'vertical',
            top: 'center',
            itemGap: 25,
            textStyle: { //图例文字的样式
              color: '#fff',
              fontSize: 16
            },
          },
          // color:['#91CC75','#FAC858','#EE6666','#73C0DE'],
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          series: [
            {
              name: 'Nightingale Chart',
              type: 'pie',
              radius: [20, 90],
              center: ['30%', '60%'],
              roseType: 'area',
              itemStyle: {
                borderRadius: 8
              },
              labelLine: false,
              // data: this.pieData.cakeData
              data:[
                { value: 40, name: '叶菜' },
                { value: 38, name: '瓜果类' },
                { value: 32, name: '姜葱' },
                { value: 30, name: '水生菜' },
              ]
            }
          ]
        };
        this.chart2.setOption(option)
      },

      resizeChart() {
        let chartDom = document.getElementById(this.id);
        let myChart = echarts.getInstanceByDom(chartDom);
        if (myChart == null) {
          this.initChartLine();
        } else {
          myChart.dispose();
          this.initChartLine();
        };
      }
        
    }
  }
</script>
<style scoped lang="scss">
.chart-container {
  width: 100%;
  height: 260px;
}
</style>
